<template>
    <view class="app-navbar">
        <view class="temp-navbar" v-if="props.fixed" :style="{ height: `${status.navBarHeight}px` }"></view>
        <view :class="['navbar', { 'is-fixed': props.fixed }]"
            :style="{ height: `${status.navBarHeight}px`, background: `${props.bgColor}` }">
            <view class="capsule-box dir-left-nowrap main-center"
                :style="{ height: `${status.menuHeight}px`, lineHeight: `${status.menuHeight}px`, bottom: `${status.menuBottom}px` }">
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts" name="AppNavBar">
/**
 * AppNavBar 自定义NavBar
 * @description 自定义NavBar
 * @property {Array} menu 菜单数据
 */
export interface AppNavBarProps {
    /**背景颜色 */
    bgColor?: string
    /**是否置顶 */
    fixed?: boolean
}
const props = withDefaults(defineProps<AppNavBarProps>(), {
    bgColor: '#fff',
    fixed: false
})

const emit = defineEmits(['click'])

const status = reactive({
    navBarHeight: 0,
    menuBottom: 0,
    menuHeight: 0,
})


//#ifdef MP
// 获取系统信息
const systemInfo = uni.getSystemInfoSync();
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
console.log('menuButtonInfo:', menuButtonInfo);
const statusBarHeight = systemInfo.statusBarHeight ?? 0
status.navBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height + statusBarHeight;
status.menuBottom = menuButtonInfo.top - statusBarHeight;
status.menuHeight = menuButtonInfo.height;
//#endif
</script>

<style scoped lang="scss">
.app-navbar {
    position: relative;

    .navbar {
        &.is-fixed {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1;
        }
    }

    .capsule-box {
        width: 100vw;
        position: absolute;
    }
}
</style>